<template>
    <div class="li">
        <el-row :gutter="50" justify="space-between">
            <el-col :span="16" style="padding: 0px">
                <Header></Header>
                <div class="list">
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="任务列表" name="first">
                            <div class="lists">
                                <Task :type="5" :list="state.list" @detailurl="detailUrl"></Task>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="审核中" name="first1">
                            <div class="lists">
                                <Task :type="6" :list="state.list" @detailurl="detailUrl"></Task>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
            <el-col :span="8" >
                <Right></Right>
            </el-col>
        </el-row>

    </div>
</template>
<script>
    import { onMounted, reactive } from "vue";
    import Header from "@/components/common/header";
    import Right from "@/components/common/right";
    import Task from "@/components/common/task";
    import { getTaskHall } from "@/request/api";
    const state = reactive({
        list: [],
        total: 0,
        page: 1,
        admin_id: 0,
        department_id: -1,
        status: 1
    })
    import {useRoute, useRouter} from "vue-router";
    export default {
        name: "Login",
        components: {Header, Right, Task},
        setup() {
            const route = useRoute();
            const router = useRouter();
            //跳转
            const detailUrl = async (id,title,rec_id = 0) => {
                let path = "operate-release-22";
                let types = 1
                router.push({ name: path ,query: { id,types}});
            };
            const init = () => {
                let param = {
                    page: state.page,
                    pageSize: 4,
                    status: state.status
                }
                getTaskHall(param).then(res => {
                    state.list = res.data.data;
                    state.total = res.data.total
                    let userpar = localStorage.getItem('user')
                    let user = JSON.parse(userpar);
                    state.department_id = user.department_id
                    state.admin_id = user.id
                })
            }
            function handleClick(tab, event){
                state.page = 1
                if(tab.index == 1){
                    state.status = 0
                }else{
                    state.status = 1
                }
                init()
            }
            onMounted(async () => {
                init();
            })
            return {
                activeName: 'first',
                list: [
                    {
                        id: 1
                    },
                    {
                        id: 2
                    }
                ],
                detailUrl,
                handleClick,
                state
            };
        }
    };


</script>
<style scoped>
    .list {
        margin-left: 27px;
    }
</style>
